import React, { useEffect, useState } from 'react';
import styles from './index.less';
import cls from 'classnames';
import BottomCharts from './bottomCharts';
import LeftPanel from './sidePanel/leftPanel';
import RightPanel from './sidePanel/rightPanel';
import { useEffectOnce } from 'react-use';
import { connect } from 'umi';
import { updateEchartsLayer } from '@/components/content/mainPage/chartLayer/init.js';

/**
 * 主界面
 * @param {*} param0
 */
const MainPage = ({ dispatch, projList, isFullScreen, level, mainProjList }) => {
  useEffectOnce(() => {
    dispatch({
      type: 'kanban/getProjectListAndRender',
    });
    dispatch({
      type: 'kanban/getProjandModelNum',
    });
    let viewContainer = document.getElementsByClassName('view-container')[0];
    viewContainer.addEventListener('click', e => {
      console.log(e.target.className);
      if (e.target.className.indexOf('c-popup-link') !== -1) {
        const [code, name] = e.target.className.split(' ')[1].split('____');
        // console.log(code, name);

        dispatch({
          type: 'app/pushUrl',
          payload: {
            i: code,
            n: name,
          },
        });
      }
    });
  });

  useEffect(() => {
    try {
      let lyr = agsGlobal.view.map.allLayers.filter(e => e.title === '总项目点位').items[0];
      let lyr2 = agsGlobal.view.map.allLayers.filter(e => e.title === '项目点位').items[0];
      if (level === 'section') {
        lyr2.visible = true;
        lyr.visible = false;
        updateEchartsLayer(projList);
      } else if (level === 'project') {
        lyr2.visible = false;
        lyr.visible = true;
        updateEchartsLayer(mainProjList);
      }
    } catch (err) {
      console.log(err);
    }
    return () => {};
  }, [level, mainProjList, projList]);

  return (
    <div className={styles.mainPage}>
      {!isFullScreen && (
        <div>
          <LeftPanel />
          <RightPanel />
          <BottomCharts />
        </div>
      )}
    </div>
  );
};

export default connect(({ kanban, app }) => {
  return {
    projList: kanban.projList,
    isFullScreen: app.isFullScreen,
    level: kanban.level,
    mainProjList: kanban.mainProjList,
  };
})(MainPage);
